<template>
  <div class="Grid">
    <div class="Grid-cell u-1of2">
      <div style="height: 600px; width: 100%">
        <n-space vertical>
          <n-card
            style="background-color: #16151a"
            size="small"
            hoverable
            v-for="(num, index) in 4"
            v-bind:key="index"
            @mousedown="createNode($event, num)"
          >
            <div class="single-seller d-flex align-items-center">
              <div class="seller-info ml-3">
                <a class="seller" style="color: #f9f9f9">法大师傅</a>
                <div align="left" style="color: #8e8e8e">dfdf</div>
              </div>
            </div>
          </n-card>
        </n-space>
      </div>
    </div>
    <div class="Grid-cell u-full">
      <div style="height: 100%" id="modX6"></div>
    </div>
    <div class="Grid-cell u-1of2">
      <div style="height: 600px; width: 100%">
        <n-space vertical>
          <n-card
            style="background-color: #1f1f2b"
            size="small"
            hoverable
            v-for="(num, index) in 4"
            v-bind:key="index"
            @mousedown="createNode($event, num)"
          >
            <div class="single-seller d-flex align-items-center">
              <div class="seller-info ml-3">
                <a class="seller" style="color: #f9f9f9">是的地方</a>
                <div align="left" style="color: #8e8e8e">三个地方</div>
              </div>
            </div>
          </n-card>
        </n-space>
      </div>
    </div>
  </div>
</template>

<script lang="js">
import { defineComponent } from "vue";
import { NSpace, NCard } from "naive-ui";
import "@antv/x6-vue-shape"
import { Addon, FunctionExt } from "@antv/x6";
import { X6Graph, EventListener } from "./x6/antvX6";
import { Register } from "./x6/register";
import DataStructure from './x6/dataStructure';
const { Dnd } = Addon;
export default defineComponent({
  name: "Home",
  components: {
    NCard,
    NSpace
  },
  data () {
    return {
      initScale: 1,
      graph: null,
      node: null,
    }
  },
  mounted () {
    this.registerX6()
    this.initGraph()
  },
  methods: {
    registerX6 () {
      const registerObj = new Register()
      registerObj.registerEdge()
      registerObj.registerParamNode()
      registerObj.registerModStepNode('mod-node')
    },
    initGraph () {
      const modX6Id = document.getElementById('modX6')
      const graph = new X6Graph(modX6Id).createChoreographer()
      graph.on('node:mouseenter', FunctionExt.debounce(() => {
        const ports = modX6Id.querySelectorAll(
          '.x6-port-body'
        )
        this.showPorts(ports, true)
      }), 500)
      graph.on('node:mouseleave', () => {
        const ports = modX6Id.querySelectorAll(
          '.x6-port-body'
        )
        this.showPorts(ports, false)
      })
      this.graph = graph
      this.graph.zoom(-0.2)
      this.dnd = new Dnd({
        target: this.graph,
        scaled: false,
        animation: true
      })
      this.graphOnEvent()
      // 绑定Delete快捷键
      this.graph.bindKey('delete', (e) => { this.deleteCell() }, 'keydown')
    },
    graphOnEvent () {
      const GraphEvent = new EventListener(this.graph)
      GraphEvent.connectedEvent()
      GraphEvent.removedEdgeEvent()
      GraphEvent.contextmenuEvent()
      GraphEvent.mouseenterEdgeEvent()
      GraphEvent.mouseleaveEdgeEvent()
    },
    showPorts (ports, show) {
      for (let i = 0, len = ports.length; i < len; i = i + 1) {
        ports[i].style.visibility = show ? 'visible' : 'hidden'
      }
    },
    // 节点删除事件
    deleteCell () {
      if (this.selectCell) {
        if (this.graph.isNode(this.selectCell)) {
          // 删除节点
          this.graph.removeCell(this.selectCell)
        }
      } else {
        console.log('warning', '请先选中需要删除的节点或边！')
      }
      this.selectCell = null
    },
    createNode (e) {
      const nodePorts = [
        {
          group: 'out'
        },
        {
          group: 'in',
          connected: false
        }
      ]
      // 输入连接桩的位置定位
      this.addNode(nodePorts)
        this.dnd.start(this.node, e)
    },
    addNode (nodePorts) {
      const cellObjValue = {
        nodeHeight: 54,
        visibility: 'visible',
        nodePorts: nodePorts
      }
      const cellObj = DataStructure.cellData(cellObjValue)
      this.node = this.graph.createNode(cellObj)
    },
    addEdge (source, target, attrs) {
      this.graph.addEdge({
        source: source,
        target: target,
        attrs: attrs,
        router: {
          name: 'manhattan'
        },
        zIndex: 0
      })
    },
    scaleView (e, flag) {
      e.preventDefault()
      if (flag === 'up') {
        this.initScale = 0.1
      } else {
        this.initScale = -0.1
      }
      this.graph.zoom(this.initScale)
    }
  }
});
</script>
<style scoped>
.Grid {
  /*background-color: #181821;*/
  height: 920px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Grid-cell {
  border-radius: 10px;
  margin: 6px;
  height: 640px;
  flex: 1;
}

.Grid-cell.u-full {
  flex: 0 0 54%;
}

.Grid-cell.u-1of2 {
  flex: 0 0 15%;
}
.n-card {
  border-radius: 8px;
}
.align-items-center {
  align-items: center !important;
}
.d-flex {
  display: flex !important;
}
.seller-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.ml-3 {
  margin-left: 1rem !important;
}
.top-seller-area .card .single-seller .seller-info a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.seller-info .seller {
  font-weight: 600 !important;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
</style>
